<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="xx a b c eeee" data-id="自定义的" title="yy" contenteditable="true">哈哈哈</div>

<div id="top" style="height: 200px; background-color: gray"></div>

<button id="h" type="button">隐藏</button>
<button id="s" type="button">显示</button>
<button id="t" type="button">我就看看</button>


<div id="x">
    <div>哈哈哈1</div>
    <div>哈哈哈2</div>
    <div>哈哈哈3</div>
    <div>哈哈哈4</div>
    <div>哈哈哈5</div>
    <div>哈哈哈6</div>
    <div>哈哈哈7</div>
    <div>哈哈哈8</div>
    <div>哈哈哈9</div>
    <div>哈哈哈10</div>
</div>

<script src="jquery-3.4.0.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script>

$(function () {

    // console.log($('.xx').attr('title'));
    // console.log($('.xx').attr('data-id'));
    // console.log($('.xx').prop('data-id'));
    // console.log($('.xx').prop('title'));
    // $('.xx').attr('title', 'hhhhhhhh')

    // $('.xx').removeProp('title')
    // $('.xx').removeAttr('title')

    // $('.xx').addClass('xxxxxx')
    // $('.xx').removeClass('xx')

    // $('.xx').toggleClass('eeeeeerrrrr')

    // $('#h').click(function () {
    //
    //     $('#top').hide(5000, 'easeInOutBounce')
    // })
    //
    // $('#s').click(function () {
    //
    //     $('#top').show(5000, 'easeOutBack')
    // })
    //
    // $('#t').click(function () {
    //
    //     $('#top').toggle(5000)
    // })


    // $('#h').click(function () {
    //
    //     $('#top').slideUp(5000, 'easeInOutBounce', function () {
    //
    //         alert(111)
    //     })
    // })
    //
    // $('#s').click(function () {
    //
    //     $('#top').slideDown(5000, 'easeOutBack')
    // })
    //
    // $('#t').click(function () {
    //
    //     $('#top').slideToggle(5000)
    // })


    // $('#h').click(function () {
    //
    //     $('#top').fadeOut(5000)
    // })
    //
    // $('#s').click(function () {
    //
    //     $('#top').fadeIn(5000)
    // })
    //
    // $('#t').click(function () {
    //
    //     $('#top').fadeToggle(5000)
    // })

    // $('#t').click(function () {
    //     $('#top').fadeTo(5000, 0.8)
    // })

    // $('#t').click(function () {
    //
    //     $('#top').animate({
    //         height: '300px',
    //         width: '300px',
    //         borderRadius:'50%'
    //     }, 5000)
    //
    // })

    // $('#x div').click(function () {
    //     //获取一个元素在选中元素列表中的索引
    //     alert($(this).index())
    // })



})


</script>
</body>
</html>